<template>
  <div>
    <div style="text-align: center">工单详情页面</div>
    <br />
    <div style="text-align: center">
      <el-button type="primary" @click="returnWorkOrder"
        >返回工单页面</el-button
      >
    </div>
    <br />

    <!-- 数据展示 -->
    <div>
      <!-- 工单 -->
      <el-card style="width: 100%">
        <template #header>
          <div class="card-header">
            <span>工单详情</span>
          </div>
        </template>
        <p class="text item">工单号：{{ serveWorkOrder.workordernumber }}</p>
        <p class="text item">服务项目：{{ serveWorkOrder.serveproject }}</p>
        <p class="text item">实际付款：{{ serveWorkOrder.actualpayment }}</p>
        <p class="text item">派单时间：{{ serveWorkOrder.sendordertime }}</p>
        <p class="text item">
          结束时间：{{
            serveWorkOrder.endtime == null ? "未结束" : serveWorkOrder.endtime
          }}
        </p>
        <p class="text item">工单状态：{{ serveWorkOrder.state }}</p>
      </el-card>
      <br />
      <!-- 服务人员 -->
      <el-card style="width: 100%">
        <template #header>
          <div class="card-header">
            <span>服务人员详情</span>
          </div>
        </template>
        <p class="text item">工单号：{{ servePerson.pname }}</p>
      </el-card>
      <br />
      <!-- 订单 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wid: 1,
      serveWorkOrder: [],
      servePerson: [],
    };
  },
  mounted() {
    this.wid = this.$route.params.wid;
    this.getWorkOrder();
  },
  methods: {
    //返回工单页面
    returnWorkOrder() {
      this.$router.push("/serveWorkOrderList");
    },

    //查询工单
    getWorkOrder() {
      console.log(this.wid);
      this.$axios.get("/serveworkorder/" + this.wid).then((res) => {
        console.log(res.data.data);
        this.serveWorkOrder = res.data.data;
        this.servePerson = res.data.data.servePerson;
      });
    },
  },
};
</script>

<style>
</style>